<template>
	<view>
		<view class="layout">
			<view class="viewbox" style="background-color: #fff;"></view>
			<img class="group1" src="../../static/bg.png" />

			<!-- 登录时 -->
			<view class="informationbx">
				<view class="welcomebox-avatar">
					<image :src="avatar_logo"></image>
				</view>
				<view class="welcomebox-login" v-if="!isLogin" @click="goToWxLogin()">登录</view>
				<view class="welcomebox" v-if="isLogin">{{ cname }}</view>
			</view>


			<!-- 扫码页面 -->
			<navigator :url="bannerLink" class="index_b">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in goods_banner">
						<!-- <image :src="`http://127.0.0.1:8000/${encodeURIComponent(item.image)}`" mode="aspectFill"> -->
						<image :src="item.image" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</navigator>

			<!-- 下面 -->
			<view class="group3" @click="navigate('/pages/person/person',1)">
				<view class="p1">
					<view class="parse1">
						<view class="text1">进入个人中心页面</view>
						<view class="text2">欢迎你：<text v-if="isLogin">{{ username }}</text></view>
					</view>
					<image style=" height: 70rpx; width: 70rpx; position: absolute; margin: 47rpx 0 0 550rpx;"
						src="../../static/vipicon.png"></image>
				</view>

				<!-- <image class="image3" src="../../static/lineshu.png"></image> -->
			</view>



			<!-- 左边右边 -->
			<view class="sacnboxlist">
				<view class="sacnbox" @click="navigate('/pages/goodslist/goodslist')">
					<view class="scan-title">二手市场</view>
					<view class="scan-dec">进入市场</view>
					<view class="scan-icon">
						<u-icon name="home-fill" color="#ff1c1f" size="50rpx" top="15rpx"></u-icon>
					</view>
				</view>

				<view class="listbox" @click="navigate('/pages/goods/goods',1)">
					<view class="scan-title">发布商品</view>
					<view class="scan-dec">点击发布商品</view>
					<view class="scan-icon">
						<u-icon name="home-fill" color="#55f7ff" size="50rpx" top="15rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/apiService';
	import request from '../../common/request';

	export default {
		data() {
			return {
				showLoading: true,
				isLogin: true,
				goods_banner: [],
				username: '',
				result: '',
				avatar_logo: 'https://s1.aigei.com/prevfiles/4f4678659f264ae3bac378086f490c96.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:EF0xgrWpIyY1kVaPQuEEz76nByU='
			}
		},
		onLoad() {
			this.loginfo()
		},
		mounted() {
			const mid = uni.getStorageSync('mid');
			const username = uni.getStorageSync('username')
			this.home_config_post();
			this.username = username

			console.log("mid是", mid)
			if (mid) {
				this.isLogin = true;
			} else {
				this.isLogin = false;
			}
		},

		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/wxrole'
						})
					}, 100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			goToWxLogin() {
				uni.navigateTo({
					url: '/pages/auth/wxrole'
				});
			},
			home_config_post() {
				let paramsList = {

				}
				let optsList = {
					url: 'api/banner/enabled',
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("接口", res.data.data)
						_this.goods_banner = res.data.data.map(item => {
							return {
								...item,
								image: request.baseUrl_img + item.image
							};
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	}

	.layout {
		position: relative;
		width: 100%;
		height: 100vh;
		/* 使容器占满整个视口高度 */

		.group1 {
			width: 100%;
			height: 100vh;
			object-fit: cover;
			/* 使图片覆盖整个容器 */
			position: absolute;
			/* 使图片绝对定位 */
			top: 0;
			left: 0;
			z-index: -1;

		}


		.informationbx {
			width: 710rpx;
			height: 250rpx;
			margin: 80rpx 20rpx 0 20rpx;
			// border: 1px solid #ffffff;
			border-radius: 30rpx;
			position: absolute;
			// background: rgba(255, 255, 255, 1);
			// box-sizing: border-box;
			// padding: 100rpx 0 0 200rpx;
			color: #000000;
			font-size: 35rpx;

			.welcomebox-avatar {
				width: 150rpx;
				height: 150rpx;
				line-height: 150rpx;
				border-radius: 50%;
				border: 2rpx solid #ffffff;
				// float: right;
				margin: 75rpx 0 0 50rpx;
				position: absolute;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.welcomebox {
				margin: 130rpx 0 0 250rpx;
				color: #ffffff;
			}

			.welcomebox-login {
				width: 400rpx;
				height: 200rpx;
				line-height: 200rpx;
				// border: 1px solid red;
				margin: 50rpx 0 0 230rpx;
				color: #ffffff;
				// background: #f4f4f4;
			}
		}

		// 中间
		.group3 {
			width: 710rpx;
			height: 170rpx;
			border-radius: 20rpx;
			background-color: #f6f6f6;
			// margin-left: 20rpx;
			// margin-top: 108rpx;
			margin: 680rpx 20rpx 0 20rpx;
			z-index: 10;
			display: flex;
			position: absolute;

			.p1 {
				display: flex;

				.parse1 {
					.text1 {
						font-size: 22rpx;
						padding-top: 46rpx;
						padding-left: 28rpx;

					}

					.text2 {
						font-size: 22rpx;
						color: #ff8400;
						padding-left: 28rpx;
						padding-top: 10rpx;

						text {
							font-size: 48rpx;
							color: #ff8400;
						}
					}
				}

				.img1 {
					position: absolute;
					margin-left: 280rpx;
					width: 70rpx;
					height: 70rpx;
					padding-top: 47rpx;

				}
			}

			.image3 {
				position: absolute;
				margin-left: 670rpx;
				background-color: #bfbfbf;
				width: 1rpx;
				height: 107rpx;
				margin-top: 28rpx;

			}

			.p2 {
				display: flex;
				position: absolute;
				margin-left: 370rpx;

				.parse1 {

					.text1 {
						font-size: 22rpx;
						padding-top: 46rpx;
						padding-left: 28rpx;

					}

					.text2 {
						font-size: 22rpx;
						color: #ff8400;
						padding-left: 28rpx;
						padding-top: 10rpx;

						text {
							font-size: 48rpx;
							color: #ff8400;
						}
					}
				}

				.img1 {
					position: absolute;
					margin-left: 200rpx;
					width: 70rpx;
					height: 70rpx;
					padding-top: 47rpx;

				}
			}

		}


		.sacnboxlist {

			width: 710rpx;
			height: 400rpx;
			// border: 1px solid red;
			border-radius: 30rpx;
			// background: #efefef;
			margin: 840rpx 20rpx 0 20rpx;
			position: absolute;
			display: flex;

			// 扫码
			.sacnbox {
				margin: 40rpx 0 0 0;
				width: 330rpx;
				height: 280rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 30rpx;
				// transform: translateX(-50%);
				// animation: float 3s ease-in-out infinite;

				.scan-title {
					width: 220rpx;
					height: 28rpx;
					line-height: 28rpx;
					// position: absolute;
					color: #000000;
					// border: 1px solid red;
					font-size: 30rpx;
					// margin: 43rpx 0 0 93rpx;
					padding: 43rpx 0 0 30rpx;
				}

				.scan-dec {
					width: 220rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 55rpx 0 0 32rpx;
				}

				// 图标
				.scan-icon {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					position: absolute;
					margin: 50rpx 0 0 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.listbox {
				// border: 1px solid red;
				position: absolute;
				width: 330rpx;
				height: 280rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 30rpx;
				margin: 40rpx 0 0 380rpx;

				.scan-title {
					width: 220rpx;
					height: 28rpx;
					line-height: 28rpx;
					// position: absolute;
					color: #000000;
					// border: 1px solid red;
					font-size: 30rpx;
					// margin: 43rpx 0 0 93rpx;
					padding: 43rpx 0 0 30rpx;
				}

				.scan-dec {
					width: 220rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 55rpx 0 0 32rpx;
				}

				.scan-icon {
					width: 100rpx;
					height: 83rpx;
					line-height: 93rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					position: absolute;
					margin: 50rpx 0 0 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}



		}

		.index_b {
			margin-top: 330rpx;
			width: 750rpx;
			height: 320rpx;
			position: absolute;

			swiper {
				width: 750rpx;
				height: 320rpx;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>